<template>
  <div class="hk-flex card-wk">
    <div class="card-container" :class="{ active: activeIndex == 0 }" @click="handleClick(0)">
      <div class="card-pic">
        <img
          style="width: 26px; height:26px"
          :src="require('@/assets/images/sjjr_jrsjy_all.png')"
          alt=""
        >
      </div>
      <div class="card-text hk-flex">
        <p class="card-title">{{ title=='画像'?'全部画像':'全部数据' }}</p>
        <p class="card-sub-title">
          <span class="card-num">{{ getTotal() }}</span>
        </p>
      </div>
    </div>
    <div
      v-for="(item, index) in data"
      :key="index"
      class="card-container"
      :class="{ active: activeIndex == index+1 }"
      @click="handleClick(index+1,item)"
    >
      <div class="card-pic">
        <!-- <img
          style="width: 26px; height:26px"
          :src="item.iconUrl || require('@/assets/images/sjjr_jrsjy_01.png')"
          alt=""
        > -->
      </div>
      <div class="card-text hk-flex">
        <p class="card-title">{{ title=='画像'?item.name+'画像':item.name }}</p>
        <p class="card-sub-title">
          <span class="card-num">{{ item.num }}</span>
        </p>
      </div>
    </div>
    <span class="item-empty" />
    <span class="item-empty" />
    <span class="item-empty" />
    <span class="item-empty" />
    <span class="item-empty" />
  </div>
</template>

<script>
export default {
  name: 'TabList',
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    getTotal() {
      let total = 0
      this.data.forEach(i => {
        total += i.num
      })
      return total
    },
    handleClick(index, item) {
      this.activeIndex = index
      this.$emit('handleClick', index, item)
    }
  }
}
</script>

<style lang="scss" scoped>
.hk-flex{
  flex-wrap: wrap;
}
.card-wk{
  margin-top:-10px;
  justify-content:space-around;
}
.card-container {
  width:19%;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-top:10px;
  cursor: pointer;
  &:last-child{
    margin-right:0px;
  }
  .card-title{
    flex:1;
  }
  .card-text{
    flex:1;
    margin-left:10px;
  }
}
.item-empty {
  height: 0px;
  width:19%;
}
.active {
  border-color: #2979ff;
  background: #e4eeff;
}
.card-num {
  color: #2979ff;
}
</style>
